{% extends 'base.html' %}
{% block title %}
用户注册
{% endblock %}
{% block styles %}
{{ super() }}
    <style>
    #container{
        padding-top: 30px;
        width:1000px;
        height: 600px;
        margin: 0 auto;
    }
    h1{
        text-align: center;
    }
    </style>
{% endblock %}
{% block newcontent %}
<div id="container">
<h1>用户注册</h1>
<form class="form-horizontal" method="post" action="{{ url_for('user.register')}}">
  <div class="form-group">
    <label for="inputUsername" class="col-md-2 control-label">用户名</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="username" id="inputUsername" placeholder="username">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword"  class="col-md-2 control-label">密码</label>
    <div class="col-md-6">
      <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
    <div class="form-group">
    <label for="inputConfirm" class="col-md-2 control-label">确认密码</label>
    <div class="col-md-6">
      <input type="password" name="repassword" class="form-control" id="inputConfirm" placeholder="confirm password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPhone" class="col-md-2 control-label">手机号码</label>
    <div class="col-md-6">
      <input type="text" name="phone" class="form-control" id="inputPhone" placeholder="phone number">
        <span>

        </span>
    </div>
  </div>
     <div class="form-group">
    <label for="inputEmail" class="col-md-2 control-label">邮箱</label>
    <div class="col-md-6">
      <input type="email" name="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-10">
      <button type="submit" class="btn btn-primary col-sm-3">注&nbsp;&nbsp;册</button>
    </div>
  </div>
</form>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
   {#  手机号唯一验 证 #}
    <script>
    $('#inputPhone').blur(function () {
        let phone = $(this).val();
        let span_ele = $(this).next('span')

        if(phone.length===11) {
            span_ele.text('')
        $.get('{{ url_for('user.check_phone') }}', {phone:phone},function (data)
        {
            // console.log(data)
            if(data.code!=200){
                span_ele.css({"color": "#ff0011","background": ""});
            span_ele.text(data.msg)
            }
        });
        }else{
            span_ele.css({"color": "#ff0011","background": ""});
            span_ele.text('手机格式错误')
        }
    })

    </script>
{% endblock %}